const { defineConfig } = require('@vue/cli-service')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css']
module.exports = defineConfig({
    lintOnSave: false,
    transpileDependencies: true
})

//简单版本：
module.exports = {
    // publicPath:process.env.NODE_ENV === 'production' ? '/vue_workspac/aihuhuproject/' : '/',
    //基本路径
    publicPath: './',//默认的'/'是绝对路径，如果不确定在根路径，改成相对路径'./'
    // 输出文件目录
    outputDir: 'dist',
    assetsDir: 'static',
    indexPath: 'index.html',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    pages: {
        index: {
            // page 的入口文件
            entry: 'src/main.js',
            // 模板文件
            template: 'public/index.html',
            // 在dist/index.html 的输出文件
            filename: 'index.html',
            // 页面title
            // template 中 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: '首页',
            // 在这个页面中包含的块，默认情况下包含
            // 提取出来的通用 chunk 喝 vendor chunk.
            chunks: ['chunk-vendors', 'chunk-common', 'index'],
            faviconPath: 'licon.ico'
        },
    },
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: false,
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false
    },
    // webpack-dev-server 相关配置
    devServer: {
        open: false,//open 在devServer启动且第一次构建完成时，自动用我们的系统的默认浏览器去打开要开发的网页
        host: '0.0.0.0',//默认是 localhost。如果你希望服务器外部可访问，指定如下 host: '0.0.0.0'，设置之后之后可以访问ip地址
        port: 8080,
        hot: true,//hot配置是否启用模块的热替换功能，devServer的默认行为是在发现源代码被变更后，通过自动刷新整个页面来做到事实预览，开启hot后，将在不刷新整个页面的情况下通过新模块替换老模块来做到实时预览。
        https: false,
        // hotOnly: false,// hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败
        proxy: { // 开启跨域的话，需要重新运行项目
            '/admin': {
                target: 'http://10.8.40.98:9999', //目标接口域名
                ws: false,
                changeOrigin: true, //是否跨域
                // ecure: false, //false为http访问，true为https访问
                // pathRewrite: {
                //     '^/admin': '/admin' //重写接口
                // }
            }
        },
        // disableHostCheck: false
        // 设置代理
        // before: app => { }
        client: {
            // 当出现编译错误或警告是，浏览器中是否显示全屏覆盖
            overlay: {
                runtimeErrors: false
            }
        }
    },
    configureWebpack: {
        // 开启gzip压缩
        plugins: [
            new CompressionWebpackPlugin({
                filename: '[path][base].gz',
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                threshold: 10240,
                minRatio: 0.8
            })
        ]
    },
    chainWebpack: (config) => {
        // 去掉debugger console
        config.when(process.env.NODE_ENV !== "development", config => {
            config.optimization.minimizer('terser').tap((args) => {
                // 注释console.*
                args[0].terserOptions.compress.drop_console = true
                // remove debugger
                args[0].terserOptions.compress.drop_debugger = true
                // 移除 console.log
                args[0].terserOptions.compress.pure_funcs = ['console.log']
                // 去掉注释 如果需要看chunk-vendors公共部分插件，可以注释掉就可以看到注释了
                args[0].terserOptions.output = {
                    comments: false
                };
                return args
            })
        })
    },
    // 第三方插件配置
    pluginOptions: {
        // ...
    }
}